<template>
    <div>
        <!-- 请假申请表单 -->
        <div v-if="!processInstanceId">
            <h2>请假申请</h2>
            <form @submit.prevent="submitLeave">
            <div>
                <label>请假类型:</label>
                <select v-model="leaveRequest.leaveType" required>
                    <option value="sick">病假</option>
                    <option value="annual">年假</option>
                    <option value="personal">事假</option>
                </select>
            </div>
            <div>
                <label>开始日期:</label>
                <input type="date" v-model="leaveRequest.startDate" required>
            </div>
            <div>
                <label>结束日期:</label>
                <input type="date" v-model="leaveRequest.endDate" required>
            </div>
            <div>
                <label>请假原因:</label>
                <textarea v-model="leaveRequest.reason" required></textarea>
            </div>
            <button type="submit">提交申请</button>
        </form>
    </div>

    <!-- 审批任务列表 -->
    <div v-else>
        <h2>我的待办任务</h2>
        <div v-for="task in tasks" :key="task.id">
        <h3>{{ task.name }}</h3>
        <div v-if="task.taskDefinitionKey === 'deptLeaderApproval'">
            <form @submit.prevent="submitDeptLeaderApproval(task.id)">
            <div>
                <label>审批意见:</label>
                <select v-model="deptLeaderApproval.approved" required>
                    <option value="true">同意</option>
                    <option value="false">拒绝</option>
                </select>
            </div>
            <div>
                <label>备注:</label>
                <textarea v-model="deptLeaderApproval.comment"></textarea>
            </div>
            <button type="submit">提交审批</button>
        </form>
    </div>
    <div v-else-if="task.taskDefinitionKey === 'hrRecord'">
        <form @submit.prevent="submitHrRecord(task.id)">
        <div>
            <label>备案意见:</label>
            <textarea v-model="hrRecord.comment"></textarea>
        </div>
        <button type="submit">提交备案</button>
    </form>
</div>
</div>

<!-- 流程图 -->
<div>
    <h3>流程图</h3>
    <img :src="`/api/leave/diagram?processInstanceId=${processInstanceId}`" alt="流程图">
</div>
</div>
</div>
</template>

<script>
    export default {
    data() {
    return {
    leaveRequest: {
    applicant: 'user1', // 实际应用中从登录用户获取
    leaveType: '',
    startDate: '',
    endDate: '',
    reason: ''
},
    processInstanceId: null,
    tasks: [],
    deptLeaderApproval: {
    approved: true,
    comment: ''
},
    hrRecord: {
    comment: ''
}
}
},
    methods: {
    async submitLeave() {
    try {
    const response = await this.$axios.post('/api/leave/apply', this.leaveRequest);
    this.processInstanceId = response.data.processInstanceId;
    this.loadTasks();
} catch (error) {
    console.error(error);
}
},
    async loadTasks() {
    try {
    const response = await this.$axios.get(`/api/leave/tasks?userId=${this.leaveRequest.applicant}`);
    this.tasks = response.data;
} catch (error) {
    console.error(error);
}
},
    async submitDeptLeaderApproval(taskId) {
    try {
    await this.$axios.post('/api/leave/deptLeaderApprove', {
    taskId,
    approved: this.deptLeaderApproval.approved,
    comment: this.deptLeaderApproval.comment
});
    this.loadTasks();
} catch (error) {
    console.error(error);
}
},
    async submitHrRecord(taskId) {
    try {
    await this.$axios.post('/api/leave/hrRecord', {
    taskId,
    comment: this.hrRecord.comment
});
    this.loadTasks();
} catch (error) {
    console.error(error);
}
}
}
}
</script>